<template>
  <view class="container">
    <view class="bg-white" v-if="status == 1">
      <view class="header-wrap text-center"
        ><text class="color-A14430">*</text> 请选择暂停原因 <text class="color-A14430 cu-font-26">(必填)</text></view
      >
      <view class="list-wrap cu-padding-left-30 cu-padding-right-30">
        <view class="item-wrap" v-for="item in 4" :key="item">
          <image class="icon" src="@/static/images/radio_no.png" mode="aspectFit"></image>
          <!-- <image class="icon" src="@/static/images/radio_yes.png" mode="aspectFit"></image> -->
          <view class="content"> 1、当前环境不适合继续作业 </view>
        </view>
      </view>
    </view>

    <view class="bg-white" v-if="status == 2">
      <uni-forms ref="form" :model-value="detailInfo" :rules="rules" labelWidth="70vw" labelPosition="top">
        <view class="bg-white cu-padding-left-30 cu-padding-right-30 cu-padding-top-50">
          <uni-forms-item name="dealDesc" required>
            <view slot="label">
              <text class="color-A14430 cu-font-32 cu-padding-bottom-22">*</text> 请选择暂停原因
              <text class="color-A14430 cu-font-26">(必填)</text>
            </view>
            <view class="list-wrap flex space-between">
              <view class="item-wrap">
                <image class="icon" src="@/static/images/radio_no.png" mode="aspectFit"></image>
                <!-- <image class="icon" src="@/static/images/radio_yes.png" mode="aspectFit"></image> -->
                <view class="content"> 1.直接启动 </view>
              </view>
              <view class="item-wrap">
                <image class="icon" src="@/static/images/radio_no.png" mode="aspectFit"></image>
                <!-- <image class="icon" src="@/static/images/radio_yes.png" mode="aspectFit"></image> -->
                <view class="content"> 2.作废作业票 </view>
              </view>
            </view>
          </uni-forms-item>
        </view>
        <view class="bg-white bor-top cu-padding-left-30 cu-padding-right-30 cu-padding-top-20 cu-padding-bottom-20">
          <uni-forms-item name="dealDesc" label="处理原因">
            <textarea
              v-model="detailInfo.dealDesc"
              class="text-area"
              placeholder-class="placeholder__style"
              placeholder="简要说明所选启动形式的原因"
              maxlength="50"
            />
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>

    <view class="button"> 确定 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 1,
      detailInfo: {
        dealDesc: undefined
      },
      rules: {
        dealDesc: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        managerPhotoUrl: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  border-top: 10rpx solid #f5f5f5;
  .header-wrap {
    padding: 50rpx 0 22rpx;
    font-size: 32rpx;
    color: #333;
  }
  .list-wrap {
    .item-wrap {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #666666;
      line-height: 40rpx;
      padding: 18rpx 0;
      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
    }
  }

  .uni-forms-item {
    margin-bottom: 0;
  }
  .button {
    margin: 100rpx 75rpx;
    height: 98rpx;
    line-height: 98rpx;
    background: #454a5e;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
  }
}
</style>
